<template>
  <div class="set-params" @click="($event) => $event.stopPropagation()">
    <!--  body  -->
    <div class="description">
      <template v-if="selectNode.data.input.length >= 2">
        <!-- 关联关系 union unionall -->
        <a-radio-group v-model="mod" class="mode-radio-group">
          <a-radio :value="1" class="mode-radio">UNION</a-radio>
          <a-radio :value="2" class="mode-radio">UNION ALL</a-radio>
        </a-radio-group>
        <!-- 表名 -->
        <div class="table-name-tips">
          <div class="table-name table-name-left">
            <div class="name-width">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>
                    节点名称：{{ selectNode.data.input[0].nodeName }}
                    <br />
                    表名：{{ selectNode.data.input[0].tableName }}
                  </span>
                </template>
                <span class="name-text">
                  {{ selectNode.data.input[0].nodeName }}
                </span>
              </a-tooltip>
            </div>
          </div>
          <div class="table-name table-name-right">
            <div class="name-width">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>
                    节点名称：{{ selectNode.data.input[1].nodeName }}
                    <br />
                    表名：{{ selectNode.data.input[1].tableName }}
                  </span>
                </template>
                <span class="name-text">
                  {{ selectNode.data.input[1].nodeName }}
                </span>
              </a-tooltip>
            </div>
          </div>
        </div>
        <!-- union -->
        <div
          v-if="
            selectNode.data.input.length > 0 &&
            left.length > 0 &&
            right.length > 0
          "
          class="incidence-all"
        >
          <!-- 左表 节点 data中input字段中第一张表 -->
          <div class="incidence-all-left incidence-left-right">
            <div
              v-for="(leftItem, idx) in left"
              :key="'left' + idx"
              class="incidence-item-column"
            >
              <a-select
                v-model="left[idx]"
                class="incidence-column-select"
                size="small"
              >
                <a-select-option
                  v-for="(column1, index) in selectNode.data.input[0].tableCols"
                  :key="'column1' + index"
                  :value="column1"
                  >{{ column1 }}</a-select-option
                >
              </a-select>
              <div class="incidence-line"></div>
            </div>
          </div>
          <!-- 右表 节点 data中input字段中第二张表 -->
          <div class="incidence-all-right incidence-left-right">
            <div
              v-for="(rightItem, idx) in right"
              :key="'right' + idx"
              class="incidence-item-column"
            >
              <a-select
                v-model="right[idx]"
                class="incidence-column-select"
                size="small"
              >
                <a-select-option
                  v-for="(column2, index) in selectNode.data.input[1].tableCols"
                  :key="'column2' + index"
                  :value="column2"
                  >{{ column2 }}</a-select-option
                >
              </a-select>
              <span class="delete-icon" @click="deleteIncidence(idx)">
                <a-icon-font type="iconicon-beifen5" />
              </span>
            </div>
          </div>
        </div>
        <div v-else class="no-incidence">-- 暂无关联关系，请添加关联 --</div>
        <!--  添加关联关系 btn  -->
        <div
          v-if="selectNode.data.input.length > 0"
          class="add-incidence-relation"
          @click="addIncidenceRelation"
        >
          <a-icon type="plus" />添加关联
        </div>
      </template>
      <div v-else class="set-params-warning">
        -- 该节点需要添加两个父节点 ! --
      </div>
    </div>
    <!--  footer  -->
    <div class="footer-buttons">
      <div class="btn import-btn" @click="confirm">确定</div>
      <div class="btn cancel-btn" @click="cancelChange">取消</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import DataViewStore from '@/store/modules/dataview'
import { Watch } from 'vue-property-decorator'
import { cloneDeep } from 'lodash'

@Component
export default class EtlUnion extends Vue {
  public mod = 1
  public left: Array<string> = []
  public right: Array<string> = []

  private get selectNode() {
    return DataViewStore.selectNode
  }

  // 监听激活的节点
  @Watch('selectNode', { deep: true })
  private changeSelectNode(selectNode: any) {
    if (selectNode) {
      this.initSet()
    }
  }

  public created() {
    this.initSet()
  }

  public initSet() {
    this.mod = cloneDeep(this.selectNode.data.mod)
    this.left = cloneDeep(this.selectNode.data.left)
    this.right = cloneDeep(this.selectNode.data.right)

    const index1 = this.selectNode?.data?.input[0]?.tableCols?.findIndex(
      (item: any) => item === '_record_id_'
    )
    const index2 = this.selectNode?.data?.input[1]?.tableCols?.findIndex(
      (item: any) => item === '_record_id_'
    )
    if (index1 > -1 && index2 > -1) {
      this.selectNode.data?.input[0].tableCols.splice(index1, 1)
      this.selectNode.data?.input[1].tableCols.splice(index2, 1)
    }
  }

  public deleteIncidence(idx: number) {
    this.left.splice(idx, 1)
    this.right.splice(idx, 1)
  }

  public addIncidenceRelation() {
    // 添加映射关系
    this.left.push('')
    this.right.push('')
  }

  public confirm() {
    let status = true
    this.left.forEach((item: any) => {
      if (item === '') {
        status = false
      }
    })
    this.right.forEach((item: any) => {
      if (item === '') {
        status = false
      }
    })
    if (status) {
      this.$emit('confirm', {
        left: this.left,
        mod: this.mod,
        right: this.right,
      })
    } else {
      this.$message.warning('请填写关联条件')
    }
  }

  /**
   * 取消修改
   */
  public cancelChange() {
    this.initSet()
    this.$emit('cancel')
  }
}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/set-params/setParams';
/* 模式 */
.mode-radio-group {
  font-size: 12px;
  margin-bottom: 12px;
}

/* 表名 */
.table-name-tips {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  width: 100%;

  .table-name {
    display: flex;

    .name-width {
      width: 140px;

      .name-text {
        color: #1e49f8;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }
    }
  }

  .table-name-left {
    width: 55%;
  }

  .table-name-right {
    width: 45%;
  }
}
/* 关联关系 */
.incidence-all {
  display: flex;
  justify-content: space-between;
  width: 100%;

  /* 左 */
  .incidence-all-left {
    padding-right: 24px;
    width: 55%;

    /* 线 */
    .incidence-line {
      border-bottom: 1px solid #d9d9d9;
      height: 1px;
      margin-left: 24px;
      width: calc(100% - 164px);
    }
  }

  .incidence-all-right {
    width: 45%;
  }

  /* 左右 右 */
  .incidence-left-right {
    display: flex;
    flex-direction: column;

    /* 单选框 */
    .incidence-item-column {
      align-items: center;
      display: flex;
      margin-bottom: 8px;

      .incidence-column-select {
        height: 24px;
        width: 140px;
      }

      /* delete icon */
      .delete-icon {
        cursor: pointer;
        display: inline-block;
        height: 24px;
        line-height: 24px;
        padding-left: 12px;
        width: 28px;
      }
    }
  }
}

.no-incidence {
  color: #888;
  font-style: italic;
  height: 40px;
  line-height: 40px;
  margin-bottom: 12px;
  text-align: center;
}

.set-params-warning {
  color: #888;
  font-size: 12px;
  font-style: italic;
  padding: 15px 10px 0;
  text-align: center;
}

/* 添加 */
.add-incidence-relation {
  border: 1px solid #e9e9e9;
  color: #6973ff;
  cursor: pointer;
  height: 32px;
  line-height: 32px;
  text-align: center;
  width: 100%;
}
</style>
